<template>
    <div id="wrap">
      <h1>Reactive包装注意事项补充</h1>
      <button @click="changeUser">改变user的值,看看是否会丢失响应式</button>
      <ul>
        <li>user:{{ user.name }}---{{ user.sex }}---{{ user.age }}</li>
        <li v-for="(item, index) in user.hobby" :key="index">{{ item }}</li>
      </ul>
      <hr />
      <!-- 解构完之后变成未包装的变量 -->
      <button @click="changeUserJie">改变user的值,看看是否会丢失响应式</button>
      <ul>
        <li>{{ name }}</li>
        <li>{{ sex }}</li>
        <li>{{ age }}</li>
        <li v-for="(item, index) in hobby" :key="index">{{ item }}</li>
      </ul>
      <ul>
        <li v-for="(item, index) in CopyHobby" :key="index">{{ item }}</li>
      </ul>
      <ul>
        <li v-for="(item, index) in reactCopyHobby" :key="index">{{ item }}</li>
      </ul>
    </div>
  </template>
  
  <script lang="ts">
  export default {
    name: 'scu3',
  };
  </script>
  
  <script lang="ts" setup>
  import { reactive } from 'vue';
  //对解构操作不友好：当我们将响应式对象的`原始类型`属性解构为本地变量时，将丢失响应性连接,引用类型保留响应式
  const user = reactive({
    name: '蔡徐坤',
    sex: 'nan',
    age: 18,
    hobby: ['唱', '跳', 'rap', '打篮球', '练习时常两年半'],
  });
  const changeUser = () => {
    user.age = 88;
    user.hobby.push('你干嘛');
  };
  
  //解构完之后变成未包装的变量
  const { name, sex, age, hobby } = user;
  const CopyHobby = JSON.parse(JSON.stringify(hobby)); // 深拷贝
  const reactCopyHobby = reactive(JSON.parse(JSON.stringify(hobby))); // 深拷贝并且从新包装对象
  function changeUserJie() {
    // 原始类型丢失响应式
    // name = 88
  
    // 引用类型不会丢失响应性，但是引用的还是原来的地址，会干扰结构之前的对象属性
    hobby.push('你干嘛~~~')
  
    // 深copy不会改变响应式状态
    CopyHobby.push('你干嘛~~~')
  
    // 深copy并且从新包装的对象
    reactCopyHobby.push('你干嘛~~~');
  }
  </script>
  
  <style lang="scss"></style>
  